<template>
<!-- 最新音乐 -->
  <div class="song">
    <div class="song-top">
      <h3>最新音乐</h3>
    </div>
    <SongListItem :songs="songs"></SongListItem>
  </div>
</template>

<script>
import SongListItem from '../SongListItem.vue'
export default {
  name:"SongList",
  props:{
    songs:{
      type:Array,
      default:()=>[],
      required:true
    }
  },
  components:{
    SongListItem
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";
@import "../../assets/css/variable";
.song{
  .song-top{
    width:100%;
    height: 84px;
    line-height: 84px;
    padding: 0px 20px;
    border-bottom: 1px solid #ccc;
    @include bg_sub_color();
    h3{
      font-weight: bold;
      @include font_color();
      @include font_size($font_large)
    }
  }
}
</style>